<template>
  <div class="go-project-list">
    <div class="list-header">
      <n-dropdown trigger="hover" :options="createOptions" @select="handleCreateSelect">
        <n-button ghost type="primary"> 新建{{ projectTypeName }} </n-button>
      </n-dropdown>
    </div>
    <div class="list-content">
      <n-grid v-if="list.length" :x-gap="20" :y-gap="20" cols="1 s:2 m:3 l:6 xl:6 xxl:6" responsive="screen">
        <n-grid-item v-for="(item, index) in list" :key="item.id">
          <project-list-card
            :cardData="item"
            @delete="deleteHandle($event, index)"
            @edit="editHandle"
            @setModel="setModelHandle"
            @createProject="createProjectByTemplate"
            @send="openSendModel"
            @export="exportHandle"
          ></project-list-card>
        </n-grid-item>
      </n-grid>
      <img v-else src="@/assets/images/exception/nodata.svg" alt="" />
    </div>
  </div>
  <create-modal
    :show="showModel"
    :type-name="projectTypeName"
    :cardData="activeCardData"
    :loading="loading"
    @close="closeModel"
    @submit="createHandle"
  ></create-modal>
  <send-modal
    v-if="getFirstPath() !== 'linku'"
    :show="showSendModel"
    :cardData="activeCardData"
    :loading="loading"
    @close="closeModel"
    @submit="sendHandle"
  ></send-modal>
  <send-public-modal
    v-else
    :show="showSendModel"
    :cardData="activeCardData"
    :loading="loading"
    @close="closeModel"
    @submit="sendHandle"
  ></send-public-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ProjectListCard } from '../ProjectListCard/index'
import { CreateModal } from '../CreateModal'
import { SendModal, SendPublicModal } from '../SendModal'
import { icon } from '@/plugins'
import { useDataListInit } from './hooks/useData.hook'
import { updateConfigApi } from '@/api/cloud/config'
import { getFirstPath } from '@/utils'

const {
  list,
  showModel,
  activeCardData,
  showSendModel,
  loading,
  getDataList,
  deleteHandle,
  createHandle,
  editHandle,
  getDatasource,
  openModel,
  setModelHandle,
  openSendModel,
  sendHandle,
  createProjectByTemplate,
  exportHandle,
  importProject
} = useDataListInit()

const createOptions = [
  {
    label: '创建',
    key: 'create'
  },
  {
    label: '导入',
    key: 'import'
  }
]

getDataList()

const projectTypeName = computed(() => {
  return getDatasource().includes('project') ? '项目' : '模板'
})

const closeModel = () => {
  showModel.value = false
  showSendModel.value = false
}

const handleCreateSelect = (key: string) => {
  if (key === 'create') {
    openModel()
  } else if (key === 'import') {
    importProject()
  }
}
</script>

<style lang="scss" scoped>
@include go('project-list') {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - #{$--header-height} * 2 - 2px);
  .list-header {
    text-align: right;
  }
  .list-content {
    flex: 1;
    position: relative;
    overflow-y: scroll;
    img {
      display: block;
      margin: 200px auto 0;
      width: 500px;
    }
  }
}
</style>
